<template>
  <a-layout class="layout" style="width: 100vw;height:100vh">
    <!-- 页眉 -->
    <a-layout-header>
      <h2>站点设置</h2>
    </a-layout-header>

    <!-- 内容部分 -->
    <a-layout-content style="text-align: center;">
      <div class="container">
        <a-form
          :model="formState"
          @submit.prevent="handleSubmit"
          layout="vertical"
        >
          <!-- 站点名称输入框 -->
          <a-form-item
            label="站点名称"
            name="siteName"
            :rules="rules.siteName"
          >
            <a-input v-model:value="formState.siteName" />
          </a-form-item>

          <!-- 站点编号输入框 -->
          <a-form-item
            label="站点编号"
            name="siteNumber"
            :rules="rules.siteNumber"
          >
            <a-input v-model:value="formState.siteNumber" />
          </a-form-item>

          <!-- 地址输入框 -->
          <a-form-item
            label="地址"
            name="address"
            :rules="rules.address"
          >
            <a-input v-model:value="formState.address" />
          </a-form-item>

          <!-- 邮编输入框 -->
          <a-form-item
            label="邮编"
            name="postalCode"
            :rules="rules.postalCode"
          >
            <a-input v-model:value="formState.postalCode" />
          </a-form-item>

          <!-- 提交按钮 -->
          <a-form-item>
            <a-button type="primary" html-type="submit">确认</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-layout-content>

    <!-- 页脚 -->
    <a-layout-footer style="text-align: center;">
      <p>© 2024 站点设置</p>
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { reactive } from 'vue';


// 初始化表单状态
const formState = reactive({
  siteName: '',
  siteNumber: '',
  address: '',
  postalCode: ''
});

// 定义表单验证规则
const rules = {
  siteName: [{ required: true, message: '请输入站点名称!', trigger: 'blur' }],
  siteNumber: [{ required: true, message: '请输入站点编号!', trigger: 'blur' }],
  address: [{ required: true, message: '请输入地址!', trigger: 'blur' }],
  postalCode: [{ required: true, message: '请输入邮编!', trigger: 'blur' }],
};

// 提交表单处理函数
const handleSubmit = () => {
  console.log('Form Submitted:', formState);
  localStorage.setItem('siteInfo', JSON.stringify(formState));
};
</script>

<style scoped>
/* 布局样式 */
.layout {
  min-height: 100vh;
}

/* 页眉样式 */
a-layout-header {
  background: #001529;
  padding: 0;
}

h2 {
  color: white;
  text-align: center;
  line-height: 64px;
  margin: 0;
}

/* 内容样式 */
a-layout-content {
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f2f5;
}

.container {
  width: 100%;
  margin: 20px;

  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 页脚样式 */
a-layout-footer {
  text-align: center;
}
</style>


